<template>
    <div id="app" v-loading="loading">
        <div class="title">用户投诉</div>
        <el-table :data="tableData" border @filter-change="filterTag">
            <el-table-column prop="user" label="任务类型" :show-overflow-tooltip="true" min-width="109">
                <template slot-scope="scope">
                    <div class="userHead" style="cursor: default;">
                        <img :src="scope.row.icon" class="square" />
                        {{
                            scope.row.first_name
                        }}
                        -
                        {{
                            scope.row.seconde_name
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="task_title" label="任务标题" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead ell" @click="$router.push(`/task/detail?taskId=${scope.row.id}`)">
                        {{
                            scope.row.title
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="首次投诉时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>
                        {{
                            countTrialDate(scope.row.time_start * 1000)
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="count" label="投诉次数" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>
                        {{
                            scope.row.report_count
                        }}
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="price" label="单价 / 总价" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                <font color="#F30">{{tableData[scope.$index].price}} / {{tableData[scope.$index].price}}</font>
                </template>
            </el-table-column>
            <el-table-column prop="number" label="任务数量" :show-overflow-tooltip="true"></el-table-column> -->
            <el-table-column prop="status" label="状态" :show-overflow-tooltip="true" 
                :filters="filters.list" column-key="status"
            >
                <template slot-scope="scope">
                    <font v-if="scope.row.report_status==0" class="gray">等待处理</font>
                    <font v-if="scope.row.report_status==1" class="green">已处理</font>
                    </template>
            </el-table-column>
            <el-table-column prop="btn" label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="tableBtn">
                        <template v-if="scope.row.report_status==0">
                            <template  v-if="scope.$index != compliteIndex">
                                <a
                                    @click="openPopWill(scope.$index)"
                                >
                                    立即处理
                                </a>
                            </template>
                            <template  v-if="scope.$index == compliteIndex">
                                <div>
                                    处理中...
                                </div>
                            </template>
                        </template>
                        <template v-if="scope.row.report_status==1" >
                            <a style="color:#606266"
                                @click="openPopWill(scope.$index)"
                            >
                                查看
                            </a>
                        </template>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginationBlock">
            <el-pagination 
                layout="jumper,prev, pager, next,total" 
                :total="listNumsTotal" 
                :page-size="10"
                @current-change="changePage"
            >
            </el-pagination>
        </div>
        <el-dialog :visible.sync="approvalShow" width="1100px" :close-on-click-modal="false" top="100px"
            @close="dialogClose"
        >
            <div style="margin-top:-50px;">
                    <task-step 
                        mode="preview" 
                        :taskSteps="compliteContent.custom_steps"
                    />
                <div class="footerSmallbtn">
                    <div class="portList">
                        <div class="title titles">投诉内容</div>
                        <ul>
                            <li
                                v-for="(comSonItem,comSonIndex)  of compliteContent.result"
                                :key="comSonItem.report_user_name + comSonIndex"
                            >
                                <img :src="comSonItem.avatar" />
                                {{
                                    comSonItem.report_user_name
                                }}
                                :
                                {{
                                    comSonItem.report_remark
                                }}
                            </li>
                        </ul>
                    </div>
                    <el-form class="form" label-position="left">
                        <div class="title titles">操作</div>
                        <el-row :gutter="35" class="other">
                            <el-col :span="4">
                                <el-form-item label="首页展示">
                                    <el-switch v-model="compliteContent.is_show"></el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                </el-form-item>
                                <el-form-item label="清算任务"
                                        v-if="compliteContent.status==2 || compliteContent.status==5"
                                    >
                                        <el-switch v-model="isClear"></el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="任务状态">
                                    <font color="#acacac">
                                        {{
                                            compliteContent.status_text
                                        }}
                                    </font>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogClose">取 消</el-button>
                <el-button type="primary" @click="postTaskComplaintDetail">处 理</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import TaskComplaint from './index.js';
    export default TaskComplaint;
</script>
<style lang="scss" scoped>
    .title {
        margin-bottom: 25px;
        font-size: 21px;
        margin-top: 65px;
    }
    .detailItem {
        padding: 0px 10px;
        margin-top:-50px;
    }
    .footerSmallbtn{
        margin-top:40px;
        margin-left:20px;
    }
    .portList {
        margin-bottom:40px;
        ul {
            margin-top: 18px;
            li {
                font-size: 15px;
                line-height: 35px;
                margin-bottom: 20px;
                img {
                    vertical-align: middle;
                    margin-top: -2px;
                    width: 30px;
                    height: 30px;
                    border-radius: 3px;
                    margin-right: 14px;
                }
            }
        }
    }
    .titles{
        margin-top:25px;
        margin-bottom:12px;
        font-size:19px;
    }
</style>